import React from 'react';
import {Table} from 'antd';
import PropTypes from 'prop-types';
import {formatPercent} from '../utils';
import {TABLE, PAGINATION_OPTIONS, COMMON_TABLE_QUERY_FAIL_TEXT, COMMON_TABLE_EMPTY_TEXT} from '../constants';
export class TablePanel extends React.PureComponent {
    constructor(props) {
        super(props);
        this.onChangeSort = this.onChangeSort.bind(this);
        this.state = {
            loading: false
        };
    }
    onChangeSort = (pagination, filters, sorter) => {
        this.props.onChangeSort({
            pageIndex: pagination.current - 1,
            pageSize: pagination.pageSize,
            sortedColumnKey: sorter.columnKey,
            sortedOrder: sorter.order,
        });
    };
    render() {
        const {formatMessage} = this.props.intl;
        const {pageIndex, pageSize, total} = this.props;
        const locale = {
            emptyText: this.props.hasError ? COMMON_TABLE_QUERY_FAIL_TEXT : COMMON_TABLE_EMPTY_TEXT
        };
        const pagination = {
            total,
            pageSize,
            current: pageIndex + 1,
            ...PAGINATION_OPTIONS
        };
        const columns = [{
            title: formatMessage({
                id: 'tablePanel.column.distributorCode',
                defaultMessage: '总代号'
            }),
            dataIndex: 'distributorCode',
        }, {
            title: formatMessage({
                id: 'tablePanel.column.serviceStation',
                defaultMessage: '网点数量'
            }),
            dataIndex: 'serviceStation',
        }, {
            title: formatMessage({
                id: 'tablePanel.column.brandRatio',
                defaultMessage: '单品牌占比'
            }),
            dataIndex: 'brandRatio',
            render: text => formatPercent(text)
        }, {
            title: formatMessage({
                id: 'tablePanel.column.reachingRatio',
                defaultMessage: '服务VI达标率'
            }),
            dataIndex: 'reachingRatio',
            render: text => formatPercent(text)
        }, {
            title: formatMessage({
                id: 'tablePanel.column.repairedRatio',
                defaultMessage: '一次修复率'
            }),
            dataIndex: 'repairedRatio',
            render: text => formatPercent(text)
        }, {
            title: formatMessage({
                id: 'tablePanel.column.appointmentRatio',
                defaultMessage: '预约率'
            }),
            dataIndex: 'appointmentRatio',
            render: text => formatPercent(text)
        }, {
            title: formatMessage({
                id: 'tablePanel.column.cheryRotio',
                defaultMessage: '奇瑞维修业务占比'
            }),
            dataIndex: 'cheryRotio',
            render: text => formatPercent(text)
        }, {
            title: formatMessage({
                id: 'tablePanel.column.workBaysRotio',
                defaultMessage: '工位周转率'
            }),
            dataIndex: 'workBaysRotio',
            render: text => formatPercent(text)
        }, {
            title: formatMessage({
                id: 'tablePanel.column.advisorsRotio',
                defaultMessage: '服务顾问效率'
            }),
            dataIndex: 'advisorsRotio',
            render: text => formatPercent(text)
        }, {
            title: formatMessage({
                id: 'tablePanel.column.techniciansRotio',
                defaultMessage: '技师效率'
            }),
            dataIndex: 'techniciansRotio',
            render: text => formatPercent(text)
        }, {
            title: formatMessage({
                id: 'tablePanel.column.fiveYearSalesRotio',
                defaultMessage: '客户流失率（5年）'
            }),
            dataIndex: 'fiveYearSalesRotio',
            render: text => formatPercent(text)
        }, {
            title: formatMessage({
                id: 'tablePanel.column.isSafetyReachRotio',
                defaultMessage: '网点备件安全库存达标率'
            }),
            dataIndex: 'isSafetyReachRotio',
            render: text => formatPercent(text)
        }, {
            title: formatMessage({
                id: 'tablePanel.column.sparePartRateRotio',
                defaultMessage: '备件存销比'
            }),
            dataIndex: 'sparePartRateRotio',
            render: text => formatPercent(text)
        }, {
            title: formatMessage({
                id: 'tablePanel.column.normalArrived',
                defaultMessage: '常规备件订单到货周期 /天'
            }),
            dataIndex: 'normalArrived'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.urgentArrived',
                defaultMessage: '紧急备件订单到货周期/天'
            }),
            dataIndex: 'urgentArrived'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.fulfillRotio',
                defaultMessage: '网点备件满足率'
            }),
            dataIndex: 'fulfillRotio',
            render: text => formatPercent(text)
        }, {
            title: formatMessage({
                id: 'tablePanel.column.averageClosedDaysRotio',
                defaultMessage: '平均客户抱怨关闭周期'
            }),
            dataIndex: 'averageClosedDaysRotio',
            render: text => formatPercent(text)
        }, {
            title: formatMessage({
                id: 'tablePanel.column.complaintClosedRotio',
                defaultMessage: '客户抱怨关闭率'
            }),
            dataIndex: 'complaintClosedRotio',
            render: text => formatPercent(text)
        }];
        return (
            <div>
                <Table
                    className={'white-space-nowrap'}
                    columns={columns}
                    dataSource={this.props.data}
                    loading={this.props.loading}
                    onChange={this.onChangeSort}
                    pagination={pagination}
                    rowKey="id"
                    locale={locale}
                    {...TABLE}/>
            </div>
        );
    }
}
TablePanel.propTypes = {
    data: PropTypes.array.isRequired,
    hasError: PropTypes.string.isRequired,
    loading: PropTypes.bool.isRequired,
    permissions: PropTypes.array.isRequired,
    total: PropTypes.number.isRequired,
    onChangeSort: PropTypes.func.isRequired,
    intl: PropTypes.object,
    pageIndex: PropTypes.number,
    pageSize: PropTypes.number,
};
import {connect} from 'react-redux';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
import {tableSearch} from './actions';
import {injectIntl} from './intl';

const getData = selectorFactory(['page', 'domainData', 'list', 'data']);
const getPermissions = selectorFactory(['page', 'domainData', 'permission', 'data']);
const mapStateToProps = state => ({
    data: getData(state),
    loading: state.getIn(['page', 'domainData', 'list', 'isFetching']),
    hasError: state.getIn(['page', 'domainData', 'list', 'message']),
    total: state.getIn(['page', 'domainData', 'list', 'total']),
    pageIndex: state.getIn(['page', 'appState', 'queryBySort', 'pageIndex']),
    pageSize: state.getIn(['page', 'appState', 'queryBySort', 'pageSize']),
    permissions: getPermissions(state),
});

const mapDispatchToProps = dispatch => ({
    onChangeSort: option => dispatch(tableSearch(option)),
    refreshListData: () => dispatch(tableSearch()),
});

export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(TablePanel));


